<template>
  <div>
    <!-- 权限按钮 -->
    <el-card class="maincardstyle">
      <el-row class="createbtnstyle">
        <el-button type="primary" @click="createBtn">
          <el-icon style="margin-right: 10px">
            <CirclePlus />
          </el-icon>
          {{ $t("user.Newemployee") }}
        </el-button>
      </el-row>

      <!-- 表格 -->
      <el-row>
        <el-table
          :data="displayData"
          stripe
          height="71vh"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#fafafa', color: '#333' }"
        >
          <el-table-column align="center" type="index" fixed="left" />
          <el-table-column
            align="center"
            prop="uId"
            :label="$t('user.Userid')"
            fixed="left"
            min-width="200"
          />
          <el-table-column
            align="center"
            prop="uName"
            :label="$t('user.username')"
            fixed="left"
            min-width="200"
          />
          <el-table-column
            align="center"
            prop="uRoleName"
            :label="$t('user.role')"
            min-width="200"
          />
          <el-table-column
            align="center"
            prop="uStage"
            :label="$t('entirety.status')"
            min-width="200"
          >
            <template #default="scope">
              <div v-if="scope.row.uStage == 1">
                <span class="istyleOk"></span>
                {{ $t("entirety.enable") }}
              </div>
              <div v-if="scope.row.uStage == 0">
                <span class="istyleNo"></span>
                {{ $t("entirety.forbidden") }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="uAge"
            :label="$t('user.age')"
            min-width="200"
          />
          <el-table-column
            align="center"
            prop="uSex"
            :label="$t('user.sex')"
            width="200"
          >
            <template #default="scope">
              <div v-if="scope.row.uSex == '1'">
                {{ $t("user.man") }}
              </div>
              <div v-if="scope.row.uSex == '0'">
                {{ $t("user.woman") }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="uPhone"
            :label="$t('user.telephone')"
            min-width="200"
          />
          <el-table-column
            align="center"
            prop="uEMail"
            :label="$t('user.mailbox')"
            min-width="200"
          />
          <!--  右侧--table尾部的操作按钮  -->
          <el-table-column
            align="center"
            fixed="right"
            :label="$t('entirety.handle')"
            min-width="300px"
          >
            <template #default="scope">
              <el-button
                icon="edit-pen"
                text
                type="primary"
                @click="editBtn(scope.row.uId, scope.row)"
              >
                {{ $t("entirety.editor") }}
              </el-button>
              <el-button
                icon="delete"
                text
                type="primary"
                @click="deleteBtn(scope.row.uId)"
                :disabled="disabledEdit"
              >
                {{ $t("entirety.delete") }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <!-- 分页 -->
      <el-row>
        <div class="demo-pagination-block">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[1, 10, 20, 30, 50, 100]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="countData"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-row>
    </el-card>

    <!-- 公司log -->
    <el-row>
      <div class="kx-log-box">
        技术支持：
        <img
          class="imgstyle"
          src="@/assets/images/kxauto.png"
          alt="描述图片的文字"
        />
        西安开轩自动化有限责任公司
      </div>
    </el-row>

    <!-- 弹窗 -->
    <form-dialog ref="formRef" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import router from "@/router"; //路由跳转
import { fetchList, apiDeleteUser, apiSearchUser } from "@/api/user";
import { ElMessage, ElMessageBox } from "element-plus";
import emitter from "@/utils/eventbus"; //引入bus
// 引入子组件
import formDialog from "./form.vue";
const formRef = ref();
const likeword = ref(""); //模糊搜索
const tableData = ref(); //table数组
onMounted(() => {
  emitter.on("refreshUser", () => {
    getfetchList(); //刷新
  });
  getfetchList(); //刷新
});

// 搜索
const formInline = reactive({
  user: "",
  region: "",
  date: "",
});

// 增删改查
const createBtn = () => {
  formRef.value.openDialog();
};
const editBtn = (tempId: any, row: any) => {
  console.log(111111111111111, row.uRole, row.uRoleName);

  formRef.value.openDialog(tempId, row);
};
const deleteBtn = (tempId: any) => {
  ElMessageBox.confirm("是否确认删除？", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      await apiDeleteUser(tempId);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      getfetchList(); //刷新
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

// 更新当前需要显示到页面的数据
const updateDisplayData = () => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  displayData.value = tableData.value.slice(start, end); // 获取当前页数据
};

// 分页
const displayData = ref([]); // 储存当前分页的table数据
const currentPage = ref(1); // 默认在第几页
const pageSize = ref(10); // 默认1页几条数据
const countData = ref(); //总条数
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const disabledEdit = ref(false);
const uIdvalue = ref();
// 渲染列表方法
const getfetchList = async () => {
  if (localStorage.getItem("roleName") == "超级管理员") {
    uIdvalue.value = "";
    disabledEdit.value = false;
  } else {
    uIdvalue.value = localStorage.getItem("saveUName-Singapore");
    disabledEdit.value = true;
  }
  await fetchList({
    uId: uIdvalue.value,
  })
    .then((res: any) => {
      if (res.code == 200) {
        tableData.value = res.data;
        countData.value = res.data.length; //获取总数量
        updateDisplayData(); // 初始化分页显示数据
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  updateDisplayData(); // 更新分页数据
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  updateDisplayData(); // 更新分页数据
};
</script>

<style scoped lang="scss">
::v-deep .el-card__body {
  padding: 0px;
}

.topcardstyle {
  padding: 10px 20px 10px !important;
  margin-bottom: 10px;
  // background-color: #eee;
}

.maincardstyle {
  padding: 20px;
}

.createbtnstyle {
  margin-bottom: 20px;
}

.inputstyle {
  width: 300px;
}

// 搜索
.demo-form-inline .el-name {
  --el-name-width: 220px;
}

.formstyle {
  margin-bottom: -18px;
}

// 分页
.demo-pagination-block {
  margin: 0 auto;
  margin-top: 15px;
  // margin-bottom: 35px;
}

// 小圆点
.istyleNo {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  margin-right: 5px;
}

.istyleOk {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: green;
  border-radius: 50%;
  margin-right: 5px;
}

// 公司log
.kx-log-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 20px;
  line-height: 20px;
  margin-top: 15px;

  // 图片
  .imgstyle {
    width: 40px;
  }
}
</style>
